<template>
    <header class="todo-header">
        <h1>TodoList</h1>
        <div class="add-todo">
            <input
                type="text"
                placeholder="请输入待办事项..."
                v-model="newTodo"
            />
            <button @click="addTodo">添加</button>
        </div>
    </header>
    <main class="todo-list">
        <ul>
            <TodoItem
                v-for="(todo, index) in todos"
                :key="index"
                :todo="todo.text"
                @delete="todos.splice(index, 1)"
                @handleCheck="handleCheck(index, $event)"
            ></TodoItem>
        </ul>
    </main>
    <footer class="todo-footer">
        <input type="checkbox" />
        <div>已办事项{{ finishedTodosNum }}/全部事项1</div>
        <button>清除已办</button>
        <button>清除所有</button>
    </footer>
</template>
<script setup>
import TodoItem from "./components/TodoItem.vue";
import { ref, computed } from "vue";

const newTodo = ref("");
const todos = ref([]);
const addTodo = () => {
    if (newTodo.value.trim() == "") {
        alert("请输入待办事项！");
        return;
    }

    if (todos.value.includes(newTodo.value.trim())) {
        alert("该待办事项已存在！");
        return;
    } else {
        const newTodoObj = { text: newTodo.value.trim(), checked: false };
        newTodo.value = "";
        todos.value.push(newTodoObj);
    }
};
const handleCheck = (index, isChecked) => {
    todos.value[index].checked = isChecked;
};
const finishedTodosNum = computed(() => {
    return todos.value.filter((todo) => todo.checked === true).length;
});
</script>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.todo-header {
    padding: 5px 0 10px;
    background-color: #0b87ff;
    color: #f0f8ff;
    text-align: center;
}
.todo-header h1 {
    font-size: 24px;
}
.todo-header .add-todo {
    margin-top: 10px;
    display: flex;
    gap: 5px;
    justify-content: center;
}
.todo-header .add-todo input {
    width: 300px;
    height: 30px;
    padding: 0 10px;
    border-radius: 3px;
    outline: none;
    border: solid 1px white;
}
.todo-header .add-todo button {
    display: inline-block;
    width: 80px;
    background-color: #eee;
    color: #0b87ff;
    line-height: 30px;
    border: none;
    border-radius: 3px;
}
.todo-header .add-todo button:hover {
    cursor: pointer;
    background-color: #fff;
    color: #ff6700;
}
.todo-list li {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 40px;
    list-style: none;
    border-bottom: 1px solid #eee;
}
.todo-list li span {
    flex: 1;
    margin-left: 20px;
}
.todo-list li button {
    padding: 0 10px;
}
.todo-footer {
    display: flex;
    margin-top: 20px;
    padding: 10px 40px;
    background-color: #87ceeb;
}
.todo-footer div {
    flex: 1;
    margin-left: 20px;
}
.todo-footer button {
    margin-left: 10px;
    padding: 0 10px;
}
</style>
